<html>
<head><title>Example</title>

<style>
.rdiv {
	height: 240px;
	width: 150px;
	border-radius: 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
	border: 1px solid;
	display: table-cell;
	vertical-align: middle;
	padding: 5px;
	text-align: center;
}
</style>

<script src="/zepto.min.js"></script>

<script>

var pollingError = false;

function doUpdate(state)
{
	document.getElementById("devstate").innerHTML = '' + (pollingError ? '<font color="red">Link error</font>' : 'Connected');
	if (pollingError) return;

	document.getElementById("systick").innerHTML = '' + (state.systick / 1000) + ' seconds';
	document.getElementById("PA0").checked = state.PORTA.PA0 == 1;
	document.getElementById("PA1").checked = state.PORTA.PA1 == 1;
	document.getElementById("PA2").checked = state.PORTA.PA2 == 1;
	document.getElementById("PA3").checked = state.PORTA.PA3 == 1;
	document.getElementById("PA4").checked = state.PORTA.PA4 == 1;
	document.getElementById("PA5").checked = state.PORTA.PA5 == 1;
	document.getElementById("PA6").checked = state.PORTA.PA6 == 1;
	document.getElementById("PA7").checked = state.PORTA.PA7 == 1;
	
	var s = 'PC0: ' + state.PORTC[0] + '<br>';
	s = s + 'PC1: ' + state.PORTC[1] + '<br>';
	s = s + 'PC2: ' + state.PORTC[2] + '<br>';
	s = s + 'PC3: ' + state.PORTC[3] + '<br>';
	s = s + 'PC4: ' + state.PORTC[4] + '<br>';
	s = s + 'PC5: ' + state.PORTC[5] + '<br>';
	s = s + 'PC6: ' + state.PORTC[6] + '<br>';
	s = s + 'PC7: ' + state.PORTC[7] + '<br>';
	document.getElementById("PORTC").innerHTML = s;
}

var sendStateRequest = function ()
{
	$.ajax({
		url: "/state.cgi",
		timeout: 2000,
		success: function(data)
		{
			setTimeout(sendStateRequest, 200);
			pollingError = false;
			doUpdate(data);
		},
		error: function(data)
		{
			setTimeout(sendStateRequest, 1000);
			pollingError = true;
			doUpdate(data);
		},
		dataType: "json"
	});
}

function ctl(dataobj)
{
	$.ajax({
		url: "/ctl.cgi",
		data: dataobj,
		success: function(data) { doUpdate(data); },
		dataType: "json"
	});
}

function docReady()
{
	sendStateRequest();
}

$(document).ready(docReady());

</script> 

</head>
<body bgcolor="white" text="black">
<center><table cellspacing="0">
<tr>
	<td>
		<div class="rdiv">
			<b>PORTC</b><br>
			<div id="PORTC"></div><br>
		</div>
	</td>
	<td>
<!--[if lte IE 9 ]>
	Sorry, IE<9 browser<br>
	does not support SVG
<![endif]-->
<!--[if !lte IE 9]> -->
	<img height="400" src="./img/mahaon.jpg">
<!-- <![endif]-->

	</td>
	<td>
		<div class="rdiv">
			<b>Device state</b><br>
			<div id="devstate"></div><br>
			<b>Device time</b><br>
			<div id="systick"></div><br>
			<b>PORTA</b><br>
			<input id="PA0" type="checkbox" onclick="ctl({PA0: (this.checked ? 1 : 0)})">PA0<br>
			<input id="PA1" type="checkbox" onclick="ctl({PA1: (this.checked ? 1 : 0)})">PA1<br>
			<input id="PA2" type="checkbox" onclick="ctl({PA2: (this.checked ? 1 : 0)})">PA2<br>
			<input id="PA3" type="checkbox" onclick="ctl({PA3: (this.checked ? 1 : 0)})">PA3<br>
			<input id="PA4" type="checkbox" onclick="ctl({PA4: (this.checked ? 1 : 0)})">PA4<br>
			<input id="PA5" type="checkbox" onclick="ctl({PA5: (this.checked ? 1 : 0)})">PA5<br>
			<input id="PA6" type="checkbox" onclick="ctl({PA6: (this.checked ? 1 : 0)})">PA6<br>
			<input id="PA7" type="checkbox" onclick="ctl({PA7: (this.checked ? 1 : 0)})">PA7<br>
		</div>
	</td>
</tr>
</table>
</center>
</body>
</html>
